---
import Navbar from '../components/Navbar.astro';
import Footer from '../components/Footer.astro';

interface Props {
	title: string;
}

const { title } = Astro.props;
---

<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content="量化帮 - 专业的量化交易平台" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />
		
		<!-- Font Awesome 图标库 -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
		
		<!-- Google 字体 -->
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
		
		<title>{title}</title>
	</head>
	<body>
		<!-- 全局背景 -->
		<div class="global-background"></div>
		
		<Navbar />
		<main>
			<slot />
		</main>
		<Footer />
	</body>
</html>
<style is:global>
	:root {
		--accent: 0, 102, 204;
		--accent-light: 51, 153, 255;
		--accent-dark: 0, 76, 153;
		--accent-gradient: linear-gradient(
			45deg,
			rgb(var(--accent)),
			rgb(var(--accent-light)) 30%,
			white 60%
		);
		--primary: #0066cc;
		--primary-light: #3399ff;
		--primary-dark: #004c99;
		--text-primary: #333333;
		--text-secondary: #666666;
		--bg-light: #ffffff;
		--bg-accent: #f8f9fa;
	}
	
	html {
		font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
		background: #ffffff;
		scroll-behavior: smooth;
		overflow-x: hidden;
	}
	
	body {
		margin: 0;
		padding: 0;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
		overflow-x: hidden;
		color: var(--text-primary);
	}
	
	.global-background {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, rgba(240, 249, 255, 0.8), rgba(255, 255, 255, 0.95));
		background-size: cover;
		z-index: -2;
	}
	
	.global-background::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('https://images.unsplash.com/photo-1636955816868-fcb881e57954?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');
		background-size: cover;
		background-position: center;
		opacity: 0.05;
		z-index: -1;
	}
	
	main {
		flex: 1;
		position: relative;
	}
	
	code {
		font-family:
			Menlo,
			Monaco,
			Lucida Console,
			Liberation Mono,
			DejaVu Sans Mono,
			Bitstream Vera Sans Mono,
			Courier New,
			monospace;
	}
	
	/* 通用动画效果 */
	@keyframes fadeIn {
		from { opacity: 0; transform: translateY(20px); }
		to { opacity: 1; transform: translateY(0); }
	}
	
	.fade-in {
		animation: fadeIn 0.6s ease-out forwards;
	}
	
	/* 滚动条美化 */
	::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}
	
	::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 4px;
	}
	
	::-webkit-scrollbar-thumb {
		background: #c1d8f0;
		border-radius: 4px;
	}
	
	::-webkit-scrollbar-thumb:hover {
		background: var(--primary-light);
	}
</style>
